<template>
    <div class="home-swiper-wapper">
        <swiper :options="swiperOption">
            <!-- slides -->
            <swiper-slide v-for="item of swiperList" :key=item.id>
                <img class="slide-img" src="../../../assets/images/banner07.png">
            </swiper-slide>
            <!-- Optional controls -->
            <div class="swiper-pagination"  slot="pagination"></div>
            
        </swiper>
    </div>
</template>

<script>
export default {
    name: 'HomeSwiper',
    data () {
        return {
            swiperOption: {
                pagination: '.swiper-pagination',
                loop:true
            },
            swiperList:[
                {
                    id:'0001',
                    imgSrc:'../../../assets/images/banner07.png'
                },
                {
                    id:'0002',
                    imgSrc:'../../../assets/images/banner07.png'
                }
            ]
        }
    }
}
</script>

<style lang="less" scoped>
    .home-swiper-wapper /deep/ .swiper-pagination-bullet-active{
            background: #fff !important;
        }
    .home-swiper-wapper{
        width: 100%;
        height: 1.6rem;
        .slide-img{
        width: 100%;
        }
        
    }
    
</style>


